<template>
  <div>
    <h1>Items from Server</h1>
    <p v-if="error">Failed to receive items. {{ error }}</p>
    <ul v-else>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <h1>File dialog</h1>
    <button @click="open">Show Open Dialog</button>
    <button @click="save">Show Save Dialog</button>
    <p><strong>Selected File(s)</strong>: {{ selectedFile }}</p>
    <el-row>
      <el-button type="primary" @click="btnClick">主要按钮</el-button>
      <el-button type="primary" @click="increase">increase</el-button>
      <el-button type="primary" @click="openDir">选择文件夹</el-button>
      <el-button type="primary" @click="notify">通知</el-button>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">选择的文件夹</el-col>
      <el-col :span="18">{{ selectDir }}</el-col>
    </el-row>
    <el-row>
      {{ count }}
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      error: null,
      items: [],
      count: 0,
      selectedFile: 'None',
      selectDir: ''
    }
  },
  created() {
    this.$http.get('/api/items')
        .then(response => {
          this.items = response.data;
          this.$log.info('Received items from server.')
        }).catch(error => {
      this.error = error
    })
  },
  methods: {
    btnClick() {
      console.log('被点击了')
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      });
      this.$http({
        url: '/api/items',
        method: 'get',
        params: this.$http.adornParams({
          'passCode': '123',
          'enble': '100101'
        })
      }).then(({data}) => {
        console.log(data)
        this.items = data;
        this.$log.info('Received items from server.')
      }).catch(error => {
        this.error = error
      })
      this.$http({
        url: '/api/dir',
        method: 'get'
      }).then(({data}) => {
        console.log(data)
      }).catch(error => {
        this.error = error
      })
    },
    increase() {
      this.count++;
      //消息图标
      this.$interop.setBadgeCount(this.count);
    },
    decrease() {
      if (this.count > 0) {
        this.count--;
        this.$interop.setBadgeCount(this.count);
      }
    },
    open() {
      this.$interop.showOpenDialog({
        properties: ['openFile', 'multiSelections']
      }).then(result => this.selectedFile = result.filePaths);
    },
    save() {
      this.$interop.showSaveDialog({})
          .then(result => this.selectedFile = result.filePath);
    },
    /**
     * vue 调用 electron
     */
    openDir() {
      this.$interop.showOpenDialog({
        properties: ['openDirectory']
      }).then(result => {
        console.log(result.filePaths[0])
        this.selectedFile = result.filePaths
        this.selectDir = result.filePaths[0]
      });
    },
    notify() {
      var option = {
        title: '温馨提示',
        body: '不要天天坐在电脑前，要注意休息！'
      }
      this.$interop.showNotification().show()
    }
  }
}
</script>
